<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>周期日历</title>
<link rel="shortcut icon" href="${pageContext.request.contextPath}/bootstrapStyle/img/favicon.ico">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/plugins/fullcalendar/fullcalendar.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/plugins/fullcalendar/fullcalendar.print.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/animate.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/style.min.css?v=4.0.0" rel="stylesheet">
<link href="${pageContext.request.contextPath}/bootstrapStyle/css/plugins/footable/footable.core.css" rel="stylesheet">
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row animated fadeInDown">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
	                <div class="ibox-title">
	                    <h5>日历</h5>
	                </div>
                    <div class="ibox-content">
                        <div id="calendar">
                        	
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                <div class="ibox-title">
	                    <h5>自定义</h5>
	                </div>
                    <div class="ibox-content">
                        <div id="tableZiDingYi">
                        	<table class="footable table table-stripped toggle-arrow-tiny">
                        		<tr>	
                        			<th>全天</th>
	                        		<c:forEach items="${list}" var="info">
		                        		<th>${info}</th>
	                        		</c:forEach>
                        		</tr>
                        		<tr>
                        			<td>上午</td>
                        			<c:forEach items="${list}" var="info">
		                        		<th><a><span class="label label-danger">忙碌</span></a></th>
	                        		</c:forEach>
                        		</tr>
                        		<tr>
                        			<td>下午</td>
                        			<c:forEach items="${list}" var="info">
		                        		<th><a><span class="label label-primary">空闲</span></a></th>
	                        		</c:forEach>
                        		</tr>
                        	</table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="${pageContext.request.contextPath}/bootstrapStyle/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath}/bootstrapStyle/js/content.min.js?v=1.0.0"></script>
    <script src="${pageContext.request.contextPath}/bootstrapStyle/js/jquery-ui.custom.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrapStyle/js/plugins/iCheck/icheck.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrapStyle/js/plugins/fullcalendar/fullcalendar.min.js"></script>
    <script>
        $(document).ready(function(){
        	function booleanKey(key){
        		if(!key){
        			return '忙碌';
        		}else{
        			return '空闲';
        		}
        	}
        	var b=new Date();
        	var c=b.getDate();
        	var a=b.getMonth();
        	var e=b.getFullYear();
        	var week = b.getDay();
        	var day = b.getDay() || 7;
        	$("#calendar").fullCalendar({
        		header:{
        			left:"",
        			center:"title",
        			right:""
        		},
        		weekMode: 'liquid',
        		allDaySlot: false,
        		defaultView: 'agendaWeek',
        		aspectRatio:1,
        		eventLimit: true,
        		droppable:true,
        		events:[
        			{id:1,title:'1'+booleanKey(false),start:new Date(e,a,c+0-day,0,00),end:new Date(e,a,c+0-day,12,00),allDay:false,borderColor:'red',textColor:'red'},
        			{id:2,title:'2'+booleanKey(false),start:new Date(e,a,c+1-day,12,00),end:new Date(e,a,c+1-day,24,00),allDay:false,borderColor:'red',textColor:'red'},
        			{id:3,title:'3'+booleanKey(true),start:new Date(e,a,c+2-day,0,00),end:new Date(e,a,c+2-day,12,00),allDay:false,borderColor:'green',textColor:'green'},
        			{id:4,title:'4'+booleanKey(false),start:new Date(e,a,c+3-day,12,00),end:new Date(e,a,c+3-day,24,00),allDay:false,borderColor:'red',textColor:'red'},
        			{id:5,title:'5'+booleanKey(false),start:new Date(e,a,c+4-day,12,00),end:new Date(e,a,c+4-day,24,00),allDay:false,borderColor:'red',textColor:'red'},
        			{id:6,title:'6'+booleanKey(true),start:new Date(e,a,c+5-day,0,00),end:new Date(e,a,c+5-day,12,00),allDay:false,borderColor:'green',textColor:'red'},
        			{id:7,title:'7'+booleanKey(false),start:new Date(e,a,c+6-day,12,00),end:new Date(e,a,c+6-day,24,00),allDay:false,borderColor:'red',textColor:'red'},
        		]
        		})
        		/* $('#table').append("<tr>"+
            			"<th>"+a+":"+c+"-星期"+week+"</th>"+
            			"<th>"+a+":"+(c+1)+"-星期"+(week+1)+"</th>"+
            			"<th>"+a+":"+(c+2)+"-星期"+(week+2)+"</th>"+
            			"<th>"+a+":"+(c+3)+"-星期"+(week+3)+"</th>"+
            			"<th>"+a+":"+(c+4)+"-星期"+(week+4)+"</th>"+
            			"<th>"+a+":"+(c+5)+"-星期"+(week+5)+"</th>"+
            			"<th>"+a+":"+(c+6)+"-星期"+(week+6)+"</th>"+
        			"</tr>"); */
        	/* alert([  
        	    '  今天的日期为:' + b.toLocaleString(),  
        	    '七天前的日期为:' + new Date((+b) - 7*24*60*60*1000).toLocaleString()  
        	  ].join('\n')); */
        	});
    </script>
</body>
</html>